<template>
    <view class="container">
        <u-top-tips ref="uTips"></u-top-tips>
        <u-toast ref="uToast" />
        <!-- 头部区域 -->
        <view class="head">
            <img class="login-bg" src="static/login_bg.png" alt="">
            <view class="login-txt">
                用户登录
            </view>
            <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#37DABB"
                inactive-color="#606266"></u-tabs>
        </view>
        <!-- 登录表单区域 -->
        <view class="loginForm">
            <u-form :model="loginForm" ref="uForm">
                <u-form-item>
                    <u-icon name="email" size="45" color="#37DABB" class="formItemIcon"></u-icon>
                    <u-input v-model="loginForm.email" placeholder="邮箱" />
                </u-form-item>
                <u-form-item v-if="current == 0">
                    <u-icon name="lock" size="45" color="#37DABB" class="formItemIcon"></u-icon>
                    <u-input v-model="loginForm.password" type="password" placeholder="密码" confirm-type="search"
                        @confirm="login" />
                </u-form-item>
                <u-form-item v-else>
                    <u-icon name="email-fill" size="45" color="#37DABB" class="formItemIcon"></u-icon>
                    <u-input v-model="loginForm.password" type="number" placeholder="验证码" confirm-type="search"
                        @confirm="login" />
                    <u-verification-code :seconds="600" ref="uCode" @change="codeChange"></u-verification-code>
                    <u-button type="success" @click="captcha" size="mini" style="margin-right: 20rpx; background-color: #37DABB;"
                        :ripple="true" ripple-bg-color="#08D3AF">{{tips}}</u-button>
                </u-form-item>
                <u-button @click="login" :custom-style="loginBtn" :ripple="true" ripple-bg-color="#08D3AF">登录</u-button>
            </u-form>
        </view>
        <view class="tips">
            第一次请使用邮箱登录
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    name: '密码'
                }, {
                    name: '验证码'
                }],
                current: 0,
                loginForm: {
                    email: '',
                    password: ''
                },
                tips: '',
                loginBtn: {
                    backgroundColor: '#37DABB',
                    color: '#fff',
                    marginTop: '50rpx'
                },
                screenHeight: ''
            }
        },
        methods: {
            change(index) {
                this.current = index;
                this.loginForm.password = '';
            },
            codeChange(text) {
                this.tips = text;
            },
            // 获取验证码
            async captcha() {
                const res = await this.$u.api.email({
                    "email": this.loginForm.email
                })
                if (res.code !== 200) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error',
                        duration: '2300'
                    })
                }
                this.$refs.uToast.show({
                    title: res.msg,
                    type: 'success',
                    duration: '2300'
                })
                this.$refs.uCode.start();

            },
            // 用户登录
            async login() {
                const res = await this.$u.api.login({
                    "user_account": this.loginForm.email,
                    "user_password": this.loginForm.password
                })
                if (res.code !== 200) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error',
                        duration: '2300'
                    })
                }
                uni.setStorageSync('token', res.data.access_token);
                this.$refs.uToast.show({
                    title: res.msg,
                    type: 'success',
                    duration: '1000',
                    url: '/pages/user/center',
                })
                uni.switchTab({
                    url: '/pages/user/center'
                })
            }
        }
    }
</script>

<style>
    .head {
        position: relative;
    }

    .login-bg {
        width: 100%;
        z-index: -9999;
    }

    .login-txt {
        position: absolute;
        top: 50%;
        left: 10%;
        color: #FFFFFF;
        font-size: 29px;
        font-weight: 700;
    }
    .back-icon {
       position: absolute;
       top: 10%;
       left: 5%;
    }
    .loginForm {
        width: 90%;
        margin: 0 auto;
    }

    .formItemIcon {
        padding: 5rpx 10rpx 0 0;
    }
    .tips {
        text-align: center;
        margin-top: 70rpx;
        color: #909399;
    }
</style>
